<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<view slot="top" style="display: flex;justify-content: center;background-color: white;flex-direction: column;">
				<navBar slot="top" title="加入招聘"></navBar>
				<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
				<u-tabs style="font-size: 14px;" :activeStyle="{
					color: '#1875FF',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px'
				}" :inactiveStyle="{
					color: '#00000080',
					transform: 'scale(1)',
					fontSize:'14px'
				}" lineColor='#1875FF' :list="list1" @click="click"></u-tabs>
			</view>
			<view slot="bottom" :style="[{height:bottom + 'px'}]" class="bottomView">
				<view class="tuijianView" @click="tuijianHandle" v-if="tabIndex==2">推荐</view>
			</view>
			<view class="itemView" v-for="(item, index) in dataList" :key="index" @click="itemHanle(item)">
				<block v-if="tabIndex==0 || tabIndex==1">
					<view class="itemTitle">
						<view style="color: #000000;font-size: 16px;font-weight: bold;">{{item.jobScope}}</view>
						<view style="color: #247BFD;font-size: 14px">{{item.newScope}}</view>
					</view>
					<!-- <u-parse class="itemContent" :content="item.content" :lazyLoad="true"></u-parse> -->
					<view class="scaleView" v-if="item.scale">{{item.scale}}</view>
					<view class="areaView">{{item.area}}</view>
				</block>
				
				<view class="itemTitle2" v-else>
					<view style="color: #000000;font-size: 16px;font-weight: bold;">姓名：{{item.empeName}}</view>
					<view class="itemContent2">学历：{{item.empeDegree}}</view>
					<view class="itemContent2">手机号：{{item.empeCellPhone}}</view>
					<view class="itemContent2">办公地点：{{item.empeWorkCity}}</view>
				</view>
				
			</view>
		</z-paging>
	</view>
</template>

<script>
	import recruitmentCharter from '@/api/recruitmentCharter.js'
	import internalRecommendation from '@/api/internalRecommendation.js'
	import navBar from "@/components/nav_bar.vue"
	export default{
		components:{
			navBar
		},
		data(){
			return {
				bottom:0,
				indexList:[1,25,5,6],
				dataList:[],
				tabIndex:0,
				recruitmentType:'2',
				list1: [
				// 	{
				// 	name: '招聘简章',
				// 	value:'0'
				// },
				 {
				 	name: '普工招聘',
				 	value:'2'
				 },
				{
					name: '技术岗招聘',
					value:'1'
				}, {
					name: '内部推荐',
					value:'3'
				}]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom - 20;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			// this.listRequest()
		},
		onShareAppMessage() {
			return{
				title: "加入招聘",
				path: "/packageHome/pages/recruit/index",
				success(res) {
					console.log('分享成功', res);
				},
				fail(err) {
					console.error('分享失败', err);
					uni.showModal({
						title:err
					})
				}
			}
		},
		onShareTimeline() {
			return {
				title: "加入招聘",
				path: "/packageHome/pages/recruit/index"
			}
		},
		methods:{
			itemHanle(item){
				if (this.tabIndex==0 || this.tabIndex==1) {
					uni.navigateTo({
						url:'/packageHome/pages/recruit/detail?id='+item.id
					})
				}
			},
			click(item) {
				this.tabIndex = item.index;
				this.recruitmentType = item.value;
				this.$refs.paging.reload()
				// if(this.tabIndex==0){
				// 	this.listRequest()
				// }else{
				// 	this.listRequest2(item.value)
				// }
			},
			queryList(pageNo, pageSize) {
				if(this.tabIndex==2){
					internalRecommendation.listHandle2({page:pageNo,size:pageSize}).then(res =>{
						let records = res.records;
						if(pageNo==1){
							this.dataList = records;
						}else{
							this.dataList.concat(records)
						}
						this.$refs.paging.complete(res.records);
					}).catch(error =>{
						this.$refs.paging.complete(false);
					})
				}else{
					internalRecommendation.listHandle({page:pageNo,size:pageSize,recruitmentType:this.recruitmentType}).then(res =>{
						let records = res.records;
						if(pageNo==1){
							this.dataList = records;
						}else{
							this.dataList.concat(records)
						}
						this.$refs.paging.complete(records);
					}).catch(error =>{
						this.$refs.paging.complete(false);
					})
				}
				
			},
			//招聘简章
			listRequest(){
				this.dataList = [];
				recruitmentCharter.listHandle({page:1,size:10}).then(res =>{
					this.dataList = res.records;
				}).catch(error =>{
					uni.stopPullDownRefresh()
				})
			},
			listRequest2(value){
				this.dataList = [];
				internalRecommendation.listHandle({page:1,size: 10,recruitmentType:value}).then(res=>{
					this.dataList = res.records;
				}).catch(error =>{
					uni.stopPullDownRefresh()
				})
			},
			sureHandle(){
				uni.navigateBack()
			},
			tuijianHandle(){
				uni.navigateTo({
					url: '/packageHome/pages/recruit/tuijian'
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	width: 100vw;
	overflow-y: auto;
}
.itemView{
	display: flex;
	flex-direction: column;
	width: calc(100vw - 32px);
	border-radius: 12px;
	margin-left: 16px;
	// padding: 12px;
	background-color: white;
	margin-top: 8px;
	.itemTitle{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
	}
	.itemContent{
		padding: 0 12px 12px 12px;
		font-size: 12px;
		color: #333333;
		// margin-top: 12px;
	}
	.itemTitle2{
		display: flex;
		flex-direction: column;
		padding: 12px;
	}
	.itemContent2{
		color: #000000;
		font-size: 14px;
		margin-top: 8px;
	}
}
.scaleView{
	color: #000000;
	font-size: 14px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 12px;
}
.bottomView{
	height: 150px;
	width: 100vw;
	background-color: white;
	display: flex;
	justify-content: center;
}
.tuijianView{
	display: flex;
	justify-content:center;
	align-items: center;
	margin-right: 5px;
	margin-bottom: 8px;
	width: calc(100vw - 32px);
	height: 48px;
	background-color: #1875FF;
	color: white;
	border-radius: 24px;
	font-size: 14px;
}
.areaView{
	display: flex;
	width: calc(100vw - 40px);
	justify-content: flex-end;
	margin-bottom: 10px;
	font-size: 14px;
}
</style>